<template>
  <section class="banner">
    <a-space direction="vertical" :size="32">
      <div class="banner-title">
        <h1>{{ $t("layout.banner.title") }}</h1>
        <h2>{{ $t("layout.banner.subTitle") }}</h2>
      </div>
      <div class="search-form">
        <a-input-search
          v-model:value="inputValue"
          placeholder="请输入搜索内容"
          enter-button="开始搜索"
          size="large"
          @search="handleSearch"
        />
        <button class="search-btn" @click="handleMultimodalSearch">类型搜索</button>
        <button class="search-btn" @click="handleVirtualAgent">智能客服</button>
      </div>
    </a-space>
  </section>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useRouter } from "vue-router"

let inputValue = ref<string>("")

const router = useRouter()

const handleSearch = () => {
  router.push({ path: "/detail/category", query: { searchKey: inputValue.value } })
}

// 多模态搜索: 暂未开发
const handleMultimodalSearch = () => {
  router.push({
    name: "AdvancedSearch"
  })
}
//智能客服
const handleVirtualAgent = () => {
  router.push({
    path: "/interlocution"
  })
}
</script>
<style lang="scss" scoped>
.banner {
  margin-top: 56px;
  color: #fff;
  padding: 68px 0;
  // background-color: #2b4b68;
  background: linear-gradient(45deg, #555 0%, #999 100%);
  background: #4ecdc4;
  background: -webkit-linear-gradient(to right, #556270, #4ecdc4);
  background: linear-gradient(to right, #556270, #4ecdc4);
  .banner-title {
    text-align: center;
    h1,
    h2 {
      font-size: 54px;
    }
    h1 {
      margin-bottom: 24px;
    }
  }
}
.search-form {
  display: flex;
  margin: 0 auto;
  width: 60%;
  :deep(.ant-input) {
    height: 52px;
  }
  :deep(.ant-input-group-addon button) {
    width: 112px;
    height: 52px;
    color: #183e60;
    background-color: #e45b5b;
  }
  .search-btn {
    margin-left: 20px;
    min-width: 112px;
    color: #183e60;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    background-color: #f7e4a9;
  }
}
@media screen and (max-width: 992px) {
  .search-form {
    width: 80%;
  }
}
@media screen and (max-width: 768px) {
  .banner {
    padding: 24px 0 36px;
    .banner-title {
      h1,
      h2 {
        font-size: 42px;
      }
    }
  }
}
@media screen and (max-width: 576px) {
  .banner {
    .banner-title {
      h1,
      h2 {
        font-size: 32px;
      }
    }
  }
  .search-form {
    width: 94%;

    :deep(.ant-input-group-addon button) {
      width: 76px;
      font-size: 12px;
    }
    .search-btn {
      min-width: 76px;
      font-size: 12px;
    }
  }
}
</style>
